<template>
	<div>
		<bread-crumb class="bread-crumb-padding" :list="breadCrumb" :user="true"></bread-crumb>
		<div class="user-main-box">
			<accountTabList :list="tablist" :returnButton="true" backUrl="/user/account"></accountTabList>
			<div class="dis-view">
				<Row :gutter="20">
					<Col :span="10">
					<div class="page-title f-16 f-w-600 c-black">折扣优惠总览</div>
					<Row :gutter="20">
						<Col :span="12">
						<div class="view-item">
							<div class="view-label">已为您节省</div>
							<div class="view-value"><span class="c-o val">{{statisticsInfo.total ? statisticsInfo.total : 0}}</span> 元</div>
						</div>
						</Col>
						<Col :span="12">
						<div class="view-item">
							<div class="view-label">预计折扣优惠</div>
							<div class="view-value"><span class="c-black val">{{statisticsInfo.preTotal ? statisticsInfo.preTotal : 0}}</span> 元</div>
						</div>
						</Col>
						<Col :span="12">
						<div class="view-item">
							<div class="view-label">上年优惠总计</div>
							<div class="view-value"><span class="c-black val">{{statisticsInfo.lastYearTotal ? statisticsInfo.lastYearTotal : 0}}</span> 元</div>
						</div>
						</Col>
						<Col :span="12">
						<div class="view-item">
							<div class="view-label">今年优惠总计</div>
							<div class="view-value"><span class="c-black val">{{statisticsInfo.thisYearTotal ? statisticsInfo.thisYearTotal : 0}}</span> 元</div>
						</div>
						</Col>
					</Row>
					</Col>
					<Col :span="14">
					<div class="page-title f-16 f-w-600 c-black">折扣优惠统计</div>
					<div ref="chart" style="height: 200px;"></div>
					</Col>
				</Row>
			</div>
			<div class="table-top">共{{tableData.total}}条折扣优惠记录</div>
			<table class="table-area">
				<thead>
					<tr>
						<th>
              <div class="line-style" style="justify-content: center;min-width: 48px">序号</div>
						</th>
						<th>
							<div class="line-style">时间</div>
						</th>
						<th>
							<div class="line-style">金额（元）</div>
						</th>
						<th>
							<div class="line-style">描述</div>
						</th>
					</tr>
				</thead>
				<tbody>
          <tr v-if="tableData.list.length === 0">
            <td colspan="4">
              <div class="line-style" style="justify-content: center;">
                <span class="normal-f">暂无数据</span>
              </div>
            </td>
          </tr>
					<tr v-else v-for="(item, index) in tableData.list" :key="item.id">
						<td>
							<div class="line-style" style="justify-content: center;">
								<span class="normal-f">{{ index + 1 + (page - 1) * pageSize }}</span>
							</div>
						</td>
						<td>
							<div class="line-style">
								<span class="normal-f">{{item.createdTime}}</span>
							</div>
						</td>
						<td>
							<div class="line-style">
								<span class="normal-f">{{ item.rebateAmount }}</span>
							</div>
						</td>
						<td>
							<div class="line-style">
								<span class="normal-f">{{ item.remark }}</span>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="form-page-bottom-area flx-row-c-c">
				<Page :total="tableData.total" :current="page" :page-size="pageSize" :page-size-opts="pageSizeOpts"
					@on-change="pageChange" @on-page-size-change="pageSizeChange" show-elevator show-sizer show-total />
			</div>
		</div>
	</div>
</template>

<script>
  import {getBiddingRebateList, getBiddingRebateStatistics} from "@/api/bidding";
	import * as echarts from 'echarts';
	import accountTabList from "@/components/tabList/accountTabList";
	export default {
		name: "VipAccountIndex",
		components: {
			accountTabList
		},
		data() {
			return {
				loading: false,
				breadCrumb: [{name: "管理中心"},{
					name: "财务管理"
				}, {
					name: "折扣统计"
				}],
				tablist: [{
					name: "折扣统计",
					to: "/user/discount",
				}],
				pageSizeOpts: [10, 20, 50],
				pageSize: 10,
				page: 1,
        tableData: {
          total: 0,
          list: []
        },
				myChart: null,
        statisticsInfo: {}
			};
		},
		mounted() {
      this.getBiddingRebateStatistics()
      this.getBiddingRebateList()
		},
		methods: {
      chartHandler(list) {
        let arr = list.map(item => item.name)
        this.myChart = echarts.init(this.$refs.chart);
        this.myChart.setOption({
          color: ['#3aa1fe'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: '6%',
            left: '2%',
            right: '2%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 14,
                color: '#4D4D4D'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            data: arr,
          }],
          yAxis: {
            type: 'value',
            name: '折扣优惠',
            nameTextStyle: {
              fontSize: 14,
              color: '#4D4D4D'
            },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: '#4D4D4D'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#707070'
              }
            }
          },
          series: [{
            name: '折扣优惠',
            type: 'bar',
            barWidth: 24,
            data: list,
            label: {
              show: true,
              position: 'top',
              textStyle: {
                fontSize: 12,
                color: '#000'
              }
            }
          }]
        });
        window.addEventListener('resize', this.handleResize);
      },
      async getBiddingRebateList() {
        const {result, data} = await getBiddingRebateList({
          page: this.page,
          limit: this.pageSize,
        });
        if (result) {
          this.tableData = {
            total: data.total,
            list: data.list
          }
        }
      },
      async getBiddingRebateStatistics() {
        const {result, data} = await getBiddingRebateStatistics();
        if (result) {
          this.statisticsInfo = data
          this.chartHandler(data.chartList)
        }
      },
			// 切换页码
			pageChange(page) {
				this.page = page;
        this.getBiddingRebateList()
			},
			// 切换pageSize
			pageSizeChange(pageSize) {
				this.pageSize = pageSize;
        this.getBiddingRebateList()
			},
			handleResize() {
				if (this.myChart) {
					this.myChart.resize();
				}
			}
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.handleResize);
			if (this.myChart) {
				this.myChart.dispose(); // 清理图表实例
			}
		}
	};
</script>

<style lang="scss" scoped>
	.dis-view {
		padding: 20px 0;
	}

	.page-title {
		margin-bottom: 20px;
	}

	.view-item {
		margin-bottom: 20px;
	}

	.view-label {
		color: rgba(0, 0, 0, 0.42745098039215684);
		margin-bottom: 10px;
	}

	.view-value {
		color: rgba(0, 0, 0, 0.42745098039215684);

		.val {
			font-size: 24px;
		}
	}

	.table-top {
		margin-bottom: 10px;
		color: #666;
	}
</style>
